<template>
  <div class="">
    <van-swipe class="banner soft" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(banner,index) in bannerList" :key="index">
        <van-image :src="banner.pic"/>
      </van-swipe-item>
    </van-swipe>
    <div>
      <h2 class="title">推荐歌单</h2>
      <LowPlayList :playLists="playlists" />
    </div>
  </div>


</template>

<script setup>
import {ref} from "@vue/reactivity";
import {getBannerList, getPersonalized} from "../api/api";
import LowPlayList from "../components/list/LowPlayList.vue";

let bannerList = ref([]);
let playlists = ref([]);

getBannerList().then((res) => {
  bannerList.value = res.banners;
});

getPersonalized().then((res) => {
  playlists.value = res.result;
})

</script>
<style lang="scss" scoped>
.banner {
  width: 95%;
  margin: 1rem auto;
}
.title{
  margin: 1.5rem 1rem;
  font-weight: bold;
  font-size: 22px;
  color: red;
}
</style>